<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="app-nav-bar">
      <van-button
        slot="title"
        icon="search"
        type="info"
        round
        class="search-btn"
        to="/search"
        >搜索</van-button
      >
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 文章频道列表 -->
    <van-tabs v-model="active" class="tab-list">
      <van-tab
        v-for="channel in channels"
        :key="channel.id"
        :title="channel.name"
      >
        <!-- 文章列表 -->
        <ArticleList :channel="channel" />
        <!-- /文章列表 -->
      </van-tab>

      <!-- 因为汉堡按钮的定位，挡住了列表最后的元素，故再添加一个占位元素 -->
      <div slot="nav-right" class="wap-nav-place-holder"></div>

      <!-- 汉堡按钮 -->
      <div
        slot="nav-right"
        class="wap-nav-wrap"
        @click="showContentEdit = true"
      >
        <van-icon name="wap-nav" />
      </div>
      <!-- /汉堡按钮 -->
    </van-tabs>
    <!-- /文章频道列表 -->

    <!-- 弹出层 -->
    <van-popup
      :overlay="false"
      v-model="showContentEdit"
      position="bottom"
      :style="{ height: '97%' }"
      closeable
      round
      close-icon-position="top-left"
      get-container="body"
      ><ChannelEdit
        :user-channels="channels"
        @switchChannel="switchChannel"
        @deleteChannel="deleteChannel"
        :active="active"
    /></van-popup>
    <!-- /弹出层 -->
  </div>
</template>

<script>
import { getItem } from "@/utils/storage";
import { getUserChannels } from "@/api/user";
import { mapState } from "vuex";
import ArticleList from "./components/article-list.vue";
import ChannelEdit from "./components/channel-edit.vue";
export default {
  name: "Home",
  components: { ArticleList, ChannelEdit },
  data() {
    return {
      active: 0, // 被激活的标签索引
      channels: [], // 频道列表
      showContentEdit: false, // 是否展示编辑频道的弹出层
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 获取频道数据
    async loadChannels() {
      if (this.user) {
        const { data } = await getUserChannels();
        this.channels = data.data.channels;
      } else {
        const localChannels = getItem("user-channels");
        if (localChannels) this.channels = localChannels;
        else {
          const { data } = await getUserChannels();
          this.channels = data.data.channels;
        }
      }
    },

    // 自定义事件：在频道编辑组件中切换频道
    switchChannel(index) {
      this.showContentEdit = false;
      this.active = index;
    },

    // 自定义事件：在频道编辑组件中删除频道
    deleteChannel() {
      this.active--;
    },
  },
  created() {
    this.loadChannels();
  },
  beforeRouteLeave(to, from, next) {
    this.$bus.$emit("homeRouteLeave");
    next();
  },
};
</script>

<style scoped lang="less">
.home-container {
  /deep/.van-nav-bar__content {
    display: block;

    .van-nav-bar__title {
      max-width: unset;

      .search-btn {
        width: 277px;
        height: 32px;
        background-color: #5babfb;
        border: none;
      }
    }
  }

  .tab-list {
    height: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);

    /deep/.van-tabs__wrap {
      height: 40px;

      .van-tabs__nav {
        height: 40px;
        padding-bottom: unset;

        .van-tab {
          padding: 0 26px;
          color: #777777;

          &:not(:nth-last-child(4)) {
            border-right: 1px solid rgba(0, 0, 0, 0.06);
          }

          span {
            font-size: 15px;
          }
        }

        .van-tabs__line {
          bottom: 3px;
          width: 16px;
          background-color: #3296fa;
        }

        .wap-nav-place-holder {
          flex-shrink: 0;
          width: 33px;
        }

        .wap-nav-wrap {
          position: fixed;
          right: 0;
          width: 33px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          background-color: #fff;
          opacity: 0.9;

          &:before {
            content: "";
            width: 1px;
            height: 100%;
            background: url("./line.png") no-repeat;
            background-size: contain;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }
    }
  }
}
</style>
